<template>
	<div class="bookMark-wrapper" ref="bookMark" :style="handlebookMarkStyle()">
		
	</div>
</template>

<script>
	import {pxTorem} from  '@/utils/common.js' ;
	export default {
		props: {
			width: {
				type: Number,
				default:20
			},
			height: {
				type: Number,
				default:40
			},
			color: {
				type: String,
				default:'yellow'
			}
		},
		methods: {
			handlebookMarkStyle() {
				const  furcationBorder = 5 // 分叉边
				
				return {
					'borderTop': ` ${pxTorem(this.height - furcationBorder)}  solid  ${this.color}`,
					'borderRight': ` ${pxTorem(this.width/2)}  solid  ${this.color}`,
					'borderLeft': ` ${pxTorem(this.width/2)}  solid  ${this.color}`,
					'borderBottom': ` ${pxTorem(furcationBorder)}  solid  transparent`
				}
			}
		},
		mounted() {
		}
	}
	
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	@import '@/assets/styles/global.scss';
	.bookMark-wrapper {
		width: 0px;
		height: 0px;
		border-top: pxTorem(40) solid  yellow;
		border-right: 10px solid yellow;
		border-bottom: 5px solid transparent;
		border-left: 10px solid yellow;
	}
	
	
</style>
